import Taro from '@tarojs/taro'
import { Image, Text, View } from "@tarojs/components";
import './index.scss'
import PropTypes from 'prop-types'

export default class GCardList extends Taro.Component {

  static options = {
    addGlobalClass: true
  }

  static defaultProps = {
    data: [],
    rootStyle: {},
    onClick: () => {}
  }

  static propTypes = {
    data: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
    rootStyle: PropTypes.object,
    onClick: PropTypes.func
  }

  render () {
    const { data, onClick } = this.props
    return (
      <View className='g-card-list'>
        {
          data.map(card => {
            const photos = card.photos.slice(0, 3)
            return (
              <View className='g-card plr-30' key={card.id + ''} onClick={() => onClick(card)}>
                <View className='g-card-header flex-row'>
                  <Image src={card.avatar} className='g-card-head' />
                  <View className='g-card-user-box'>
                    <Text className='g-card-user-nickname ellipsis-1'>{card.nickName}</Text>
                    <View className='g-card-user-other-box'>
                      <Text className='g-card-label'>五分钟前</Text>
                      <Text className='g-card-label'>模特</Text>
                      <View className='g-card-address-box'>
                        <Text className='iconfont icon-dizhi' />
                        <Text className='g-card-label' style={{ color: '#000' }}>北京</Text>
                      </View>
                    </View>
                  </View>
                </View>
                <View className='g-card-main flex-row'>
                  <Text className='g-card-main-label ellipsis-4'>
                    <Text className='g-card-object-label'>约 · 模特</Text>
                    走过路过不要错过走过路过不要错过走过路过不要错过走过路过不要错过走过路过不要错过走过路过不要错过走过路过不要错过走过路过不要错过走过路过不要错过走过路过不要错过走过路过不要错过走过路过不要错过，约拍互免～～</Text>
                </View>
                <View className='g-card-photos flex-row'>
                  {
                    photos.map((photo, index) => (
                      <View className='g-card-photo-box' key={index}>
                        <Image src={photo.src} className='g-card-photo' mode='aspectFill' />
                        {
                          card.photos.length > 3 && index === 2 && (
                            <View className='g-card-photos-total-count-box flex-row flex-center'>
                              <Text className='g-card-photos-total-count'>+{card.photos.length - 3}</Text>
                            </View>
                          )
                        }
                      </View>
                    ))
                  }
                </View>
                <View className='g-card-footer'>
                  <Text className='g-card-label'>热度 1100</Text>
                  <Text className='g-card-label'>约拍 11</Text>
                  {/*<View className='g-card-btns flex-row'>*/}
                  {/*  /!* 分享 *!/*/}
                  {/*  <View className='g-card-btn flex-row flex-center'>*/}
                  {/*    <Text></Text>*/}
                  {/*  </View>*/}
                  {/*  /!* 喜欢 *!/*/}
                  {/*  <View className='g-card-btn flex-row flex-center'>*/}
                  {/*    <Text className='iconfont icon-dianzan' />*/}
                  {/*    <Text className='g'>10</Text>*/}
                  {/*  </View>*/}
                  {/*</View>*/}
                </View>
              </View>
            )
          })
        }
      </View>
    )
  }
}
